<template>
	<view class="container" :style="{minHeight:$height()}">
		<view class="rank-bar king-flex king-flex__column"
			:style="{backgroundImage:`url(${$utils.imagePath('/upload/image/rank-banner.png')})`}">
			<image src="@/static/Icon/tou2.gif" mode="widthFix"></image>
			<view class="rank-text">
				<text>第一名</text>
				<text style="margin:0px 60rpx;">|</text>
				<text>{{list[0].total}} 人</text>
			</view>
		</view>
		<view class="ranks">
			<view class="rank">
				<view class="items">
					<view class="item king-align__center king-flex__between" :class="{hui:index >= 3}"
						v-for="(item,index) in list" :key="index">
						<view class="king-align__center">
							<view class="rank-number">
								<image v-if="index < 3" :src="$utils.imagePath(`/upload/image/rank-${index+1}.png`)"
									mode="widthFix"></image>
								<span v-else>{{index+1}}</span>
							</view>
							<view class="user king-align__center">
								<image src="@/static/Icon/tou2.gif"></image>
								<text>{{plusXing(item.realname,1,1,"*")}}</text>
							</view>
						</view>
						<text class="person-num">{{item.total}} 人</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: []
			}
		},
		onLoad() {
			this.getRank()
		},
		methods: {
			getRank() {
				this.$axios.request(this.$api.relationshipRank, "GET").then((val) => {
					this.list = val.data
				})
			},

			plusXing(str, frontLen, endLen, cha) {
				let len = str.length - frontLen - endLen;
				if (str.length <= 2) {
					return str.substring(0, 1) + "*";
				} else {
					let xing = "";
					for (let i = 0; i < len; i++) {
						xing += cha;
					}
					return str.substring(0, frontLen) + xing + str.substring(str.length - endLen)
				}


			},
		}
	}
</script>

<style lang="scss">
	.rank-bar {
		height: 375rpx;
		background-color: #2979ff;
		background-size: 100%;
		background-repeat: no-repeat;
		align-items: center;

		image {
			width: 122rpx;
			border-radius: 50%;
			margin: 45rpx 0px;
		}

		.rank-text {
			color: #FFFFFF;
			font-size: 32rpx;
		}
	}

	.ranks {
		display: flex;
		justify-content: center;
		margin-top: -50rpx;
	}

	.rank {
		width: 94%;
		background-color: #FFFFFF;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		box-shadow: 0px 3px 6px #9e9e9e2b;

		.items {
			padding: 0px 4%;
			display: flex;
			flex-direction: column;
		}

		.item:last-child {
			border-bottom: none;
		}

		.item {
			border-bottom: 1px solid #ebebeb;
			padding: 26rpx 0px;
			color: #2979ff;

			.rank-number {
				width: 50rpx;
				text-align: center;

				image {
					width: 50rpx;
				}
			}

			.user {
				image {
					width: 66rpx;
					height: 66rpx;
					margin-left: 26rpx;
					border-radius: 50%;
					border: 1px solid #2979ff;
				}

				text {
					font-size: 28rpx;
					margin-left: 26rpx;
					font-weight: bold;
				}
			}

			.person-num {
				font-size: 28rpx;
				font-weight: bold;
			}
		}
	}

	.hui {
		color: #545454 !important;
	}
</style>